<template>
  <div>
    <section style="margin-bottom:5px;">
      <Form :model="so" :label-width="100">
        <Row>
          <Col :span="4">
            <form-field :label-width="80" label="服务器">
              <Select id="ecsId" v-model="so.nginx">
                <Option v-for="(item, cIndex) in nginxs" :value="item" :label="item" :key="'nginx:' + cIndex" />
              </Select>
            </form-field>
          </Col>
          <Col :span="5">
            <form-field :label-width="90" label="监控粒度" type="select" v-model="so.interval" :datas="intervals" />
          </Col>
          <Col :span="5">
            <form-field :label-width="90" label="聚合方式" type="select" v-model="so.aggregate" :datas="filters" />
          </Col>
          <Col :span="6">
            <form-field label="时间">
              <DatePicker type="date" v-model="currentDate" split-panels format="yyyy-MM-dd" />
            </form-field>
          </Col>
          <Col :span="2">
            <form-field :label-width="10">
              <Button type="primary" icon="md-search" shape="circle" @click="RenderMetric">查询</Button>
            </form-field>
          </Col>
        </Row>
      </Form>
    </section>
    <section>
      <div id="canvas" style="width:100%;height:480px;"></div>
    </section>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import '~/assets/js/JavaScriptExtension.js';

export default {
  data() {
    return {
      echarts: null,
      echartsOption: null,
      echartsMappings: [
        {
          title: 'HTTP请求数',
          prop: 'RequestInteval',
          yAxisIndex: 0
        },
        {
          title: '活跃的连接数量',
          prop: 'Connections',
          yAxisIndex: 1
        },
        {
          title: '读取客户端的连接数',
          prop: 'Reading',
          yAxisIndex: 1
        },
        {
          title: '响应数据到客户端的数量',
          prop: 'Writing',
          yAxisIndex: 1
        },
        {
          title: '驻留链接数',
          prop: 'Waiting',
          yAxisIndex: 1
        }
      ],
      nginxs: ['UAT', 'Production'],
      currentDate: new Date(),
      intervals: [
        { text: '实时', value: 60 },
        { text: '5分钟', value: 300 },
        { text: '10分钟', value: 600 },
        { text: '20分钟', value: 1200 },
        { text: '30分钟', value: 1800 },
        { text: '1小时', value: 3600 }
      ],
      filters: [
        {
          text: '最大',
          value: 'max'
        },
        {
          text: '最小',
          value: 'min'
        },
        {
          text: '平均',
          value: 'avg'
        },
        {
          text: '求和',
          value: 'sum'
        },
        {
          text: '方差',
          value: 'std'
        }
      ],
      so: {
        nginx: 'Production',
        interval: 300,
        aggregate: 'max'
      }
    };
  },
  methods: {
    RenderMetric() {
      let that = this;

      if (!this.currentDate) {
        this.$Notice.warning({
          title: '警告！',
          desc: '时间不能为空！'
        });

        return;
      }

      this.$http.get(`/api/monitor/status/${this.so.aggregate}/${this.so.interval}?current=${this.currentDate.format()}`).then(rs => {
        this.echartsOption.series.length = 0;
        that.echartsOption.xAxis.data = rs.datas.map(function(m) {
          var date = new Date(m.RecordDateTime);

          return date.format('yyyy-MM-dd HH:mm');
        });

        this.echartsMappings.map(mapping => {
          that.echartsOption.series.push({
            name: mapping.title,
            type: 'line',
            yAxisIndex: mapping.yAxisIndex,
            data: rs.datas.map(function(m) {
              return m[mapping.prop];
            })
          });
        });

        // 使用刚指定的配置项和数据显示图表。
        that.echarts.setOption(that.echartsOption);

        let area = this.getClientArea();

        this.ResizeChartPanel(area);
      });
    },
    ResizeChartPanel(area) {
      let canvas = document.getElementById('canvas');

      if (canvas) {
        canvas.style.height = area.height - 80 + 'px';
      }
    }
  },
  mounted() {
    const $this = this;

    this.$bus.on('windowResizeChanged', client => {
      this.ResizeChartPanel(client);

      if (this.echarts) {
        this.echarts.resize();
      }
    });

    let legendDatas = $this.echartsMappings.map(item => item.title);

    this.$nextTick(() => {
      this.echarts = echarts.init(document.getElementById('canvas'));

      this.echartsOption = {
        grid: {
          top: '60px',
          left: '70px',
          right: '40px',
          bottom: '30px'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          }
        },
        legend: {
          data: legendDatas
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            formatter: '{value}'
          },
          data: []
        },
        yAxis: [
          {
            type: 'value',
            name: 'Http请求数',
            min: 0,
            position: 'left',
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '连接/响应数量',
            position: 'right',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: []
      };

      // 使用刚指定的配置项和数据显示图表。
      this.echarts.setOption(this.echartsOption);

      this.RenderMetric();
    });
  }
};
</script>
